<template>
	<!-- 社区跳转页面 -->
	<view class="navPage">
		<view class="usercomplex">
			<!-- 底层颜色 -->
			<view class="bottomcolor">
				<!-- 用户信息 -->
				<view class="userinfo">
					<view class="userbox">
						<!-- <image class="userimg" :src="userimg" mode="aspectFill"></image> -->
						<image class="userimg" src="/common/usrimg/11.jpg" mode="aspectFill"></image>
						<!-- <view class="username">{{username1}}</view> -->
						<view class="username">小杜小杜最乖</view>
					</view>
					<!-- 关注 -->
					<view class="gaunzhubox">
						<view class="guanzhubox1">
							<view  class="guanzhu" v-if="isclick==false">
								关注
							</view>
							<view class="guanzhu" v-else>
								已关注
							</view>
							<view class="ui">
								<uni-icons type="fire" v-if="isclick==false" size="25" color="rgba(0,0,0,0.6)" @click="attentionClick" ></uni-icons>
								<!-- 当被点击时显示这个图标 -->
								<uni-icons type="fire-filled" v-else size="25" color="rgb(255,0,0,0.6)"  @click="attentionClick"></uni-icons>
							</view>
						</view>
						
					</view>
				</view>
			</view>
		</view>
		<!-- 轮播图片 -->
		<view class="image" >
		<!-- 	<image class="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRFxnP5gl5k0l_OWGMfAfprXNrPsxrme3vk4A&s" mode="aspectFill" @click="preimg(pic)"></image>
			<view class="other">
				<image class="img1" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQuZxVjM_ArDU7DqvUGtIliPOko5ST3bs4bWw&s" mode="aspectFill" @click="preimg(pic)"></image>
				<image class="img2" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTUloyoVVo0Jtd8Q7lbp4k4FveT8SqslSucWw&s" mode="aspectFill" @click="preimg(pic)"></image>
			</view> -->
			<swiper class="swiper" 
			indicator-dots indicator-color="rgb(255,255,244,0.6)" 
			indicator-active-color="#4D97EB" 
			autoplay="false" 
			duration=500 
			circular i
			nterval=3000>
				<!-- <swiper-item class="swiperitem" v-for="item in 4">
					<image class="swiperimg" src="https://preview.qiantucdn.com/58pic/Ps/jD/p1/5W/7265o4v8htjexryqpin0buzdc9m13gwk_PIC2018.png!qt_h320" mode="aspectFill"></image>
				</swiper-item> -->
				<swiper-item class="swiperitem">
					<image class="swiperimg" src="/common/Otherimages/hq720.jpg" mode="aspectFit"></image>
				</swiper-item>
				<swiper-item class="swiperitem">
					<image class="swiperimg" src="/common/Otherimages/c3.jpg" mode="aspectFill"></image>
				</swiper-item>
				<swiper-item class="swiperitem">
					<image class="swiperimg" src="/common/Otherimages/333.jpg" mode="aspectFill"></image>
				</swiper-item>
				<swiper-item class="swiperitem">
					<image class="swiperimg" src="/common/Otherimages/111.jpg" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 描述详情 -->
		<view class="text">
			<view class="contenttext">
			探店，打卡，享受不一样的精彩生活~
			</view>
		</view>
		<!-- 评论区 -->
		<view class="comments">
			<!-- 评论条数 -->
			<view class="commentsNumber">共评论102条</view>
			<!-- 自己回复 -->
			<view class="ownComment">
				<image class="ownerimg" src="../../common/Otherimages/u1.jpg" mode="aspectFill"></image>
				<!-- 评论输入框 -->
				<view class="commentsInput">
					<!-- 留下你的墨言吧 -->
					<input placeholder="留下你的墨言吧">
				</view>
			</view>
			<!-- 他人评论 -->
			<view class="commentsbox">
				<!-- 1个评论 -->
				<view class="first">
					<view class="user1">
						<image class="cuserimg" src="/common/Otherimages/u5.jpg"  mode="aspectFill"></image>
						<view class="cusername">吃饭都在玩~</view>
					</view>
					<view class="comments1">
						<view class="text1">求链接在哪里</view>
						<image class="bottle" src="/common/images/bottle.png"  mode="aspectFill" @click="increase(number1)"></image>
						<view class="textnumber">{{number1.value}}</view>
					</view>
				</view>
				<!-- 2个评论 -->
				<view class="first">
					<view class="user1">
						<image class="cuserimg" src="/common/Otherimages/u4.jpg"  mode="aspectFill"></image>
						<view class="cusername">你是我的眼</view>
					</view>
					<view class="comments1">
						<view class="text1">这就是我的理想</view>
						<image class="bottle" src="/common/images/bottle.png"  mode="aspectFill" @click="increase(number2)"></image>
						<view class="textnumber">{{number2.value}}</view>
					</view>
				</view>
				<!-- 3个评论 -->
				<view class="first">
					<view class="user1">
						<image class="cuserimg" src="/common/Otherimages/u6.jpg"  mode="aspectFill" ></image>
						<view class="cusername">不想上班</view>
					</view>
					<view class="comments1">
						<view class="text1">求链接在哪里</view>
						<image class="bottle" src="/common/images/bottle.png"  mode="aspectFill" @click="increase(number3)"></image>
						<view class="textnumber">{{number3.value}}</view>
					</view>
				</view>
			</view>
		</view>
	
		
		
		
	</view>
</template>

<script setup>
import {ref} from "vue"
import {onLoad} from "@dcloudio/uni-app"
const pic=[
	"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRFxnP5gl5k0l_OWGMfAfprXNrPsxrme3vk4A&s",
	"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQuZxVjM_ArDU7DqvUGtIliPOko5ST3bs4bWw&s",
	"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTUloyoVVo0Jtd8Q7lbp4k4FveT8SqslSucWw&s",
	"https://img.21jingji.com/uploadfile/cover/20230428/1682683536951952.jpg"
	
]
const isclick=ref(false)
const popupleft=ref(null)
const popupright=ref(null)
const userimg=ref("");
const username1=ref("");
const clickstate=ref("false");
// 添加一个新的 ref 来存储选中的单选框的值
const selectedRadio = ref(null)
const current=ref(-1);
const number1=ref({value:21})
const number2=ref({value:50})
const number3=ref({value:6})
// 接收传过来的参数
onLoad((e)=>{
	// 对传过来的参数进行解构
	// console.log("e:",e)
	// let {usrimg=null,username=null}=e;
	// console.log(usrimg,username)
	// if (usrimg && usrimg !== "") {
	// 		userimg.value=usrimg;
	// }else{
	// 	console.log(usrimg,username)
	// 	userimg.value = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRELheUT-QWl9wTcK1Fiq9qWqI2kJrKG_JsMQ&s";  // 替换为你的默认图片路径
	// 	console.log(usrimg,username)
	// }
	// username1.value=username;
	console.log("e:",e)
	let username = decodeURIComponent(e.username);
	let userimg = decodeURIComponent(e.usrimg);
	console.log(username)
	console.log(userimg)
})

// 关注按钮点击事件
const attentionClick=()=>{
	console.log("点击");
	// console.log(e);
	isclick.value=!isclick.value
	if(isclick.value){
		uni.showToast({
		  title: `已关注`,
		  mask:true,
		  icon: 'none'
		})
	}else{
		uni.showToast({
		  title: `已取消关注`,
		  mask:true,
		  icon: 'none'
		})
	}
	
}
// 实现图片预览效果
function preimg(urlImg){
	let currentImg=ref(urlImg)
	console.log("output",currentImg.value)
	uni.previewImage({
		urls:currentImg.value, 
		loop:true
	})
	
	
}
// 实现点赞功能
const increase=(number)=>{
	number.value++
}
</script>

<style lang="scss" scoped>
@keyframes gradientFlow {
 0% { background-position: 0% 0%; }
   25% { background-position: 50% 0%; }
   50% { background-position: 25% 0%; }
   75% { background-position: 75% 0%; }
   100% { background-position: 100% 0%; }
   
}	
.navPage{
	background: linear-gradient(179deg, rgba(98, 29, 243, 0.17) 3.57%, rgba(255, 125, 125, 0.10) 12.6%, rgba(255, 140, 140, 0.11) 22.62%, rgba(255, 255, 255, 0.20) 98.13%), radial-gradient(24.15% 85.7% at 10.29% 4.18%, rgba(0, 40, 250, 0.11) 0%, rgba(171, 133, 0, 0.05) 31.62%, rgba(0, 255, 148, 0.06) 62.15%, rgba(0, 0, 0, 0.00) 100%), radial-gradient(25.63% 91.04% at 96.26% 3.9%, rgba(143, 0, 255, 0.20) 0%, rgba(255, 193, 101, 0.09) 39.68%, rgba(192, 253, 253, 0.20) 80.6%, rgba(255, 255, 255, 0.20) 100%);
	 background-size: 250% 100%; /* 增大背景尺寸以允许平滑过渡 */
	 animation: gradientFlow 15s linear alternate-reverse infinite; /* 添加动画效果 */
	padding:10rpx ;
	// margin:18rpx 58rpx 30rpx 45rpx;
	.usercomplex{
		// border:1rpx solid #000;
		width: 670rpx;
		height: 94rpx;
		margin:18rpx 58rpx 30rpx 30rpx;
		.bottomcolor{
			width: 670rpx;
			height: 94rpx;
			border-radius: 20rpx;
			background: linear-gradient(90deg, rgba(255, 83, 83, 0.62) 0%, rgba(248, 217, 54, 0.68) 49.53%, rgba(244, 148, 4, 0.47) 74%, rgba(98, 43, 255, 0.17) 100%);
			// filter: blur(2.1500000953674316px);
			backdrop-filter: blur(6.050000190734863px);
			
		}
		// 用户信息样式
		.userinfo{

			width: 670rpx;
			height: 94rpx;		
			border-radius: 10px;
			opacity: 0.74;
			background: rgba(217, 217, 217, 0.96);
			box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
			display: flex;
			// padding:5rpx 28rpx 5rpx 28rpx;
			.userbox{
				width: 330px;
				display: flex;
				padding:15rpx 28rpx ;
				// border:1rpx solid #000;
				border-right: 1rpx solid rgba(0,0,0,0.1);
				.userimg{
					width: 60rpx;
					height: 60rpx;
					margin-right: 30rpx;
					border-radius: 50%;
					opacity: 0.74;
				}
				.username{
					color: #000;
					// text-align: center;
					font-family: "Noto Sans SC";
					font-size: 24rpx;
					font-style: normal;
					font-weight: 400;
					line-height: normal;
					margin-right:90rpx ;
				}
				
			}
			
		}
		// 关注样式
		.gaunzhubox{
			display: flex;
			width:270rpx;
			align-items: center;
			justify-content: center;
			.guanzhubox1{
				display: flex;
				margin-left:10rpx;
				justify-content: center;
				// box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
				.guanzhu{
					
				}
				.ui{
					
				}
			}
			
		}
	}
	
	.rating{
		// border:1px solid #000;
		margin:18rpx 25rpx 30rpx 40rpx;
		display: grid;
		grid-template-columns: repeat(3,1fr);
		
		// height: 186rpx;
		.box{
			width:198rpx;
			height: 186rpx;
			border-radius: 14rpx;
			background: linear-gradient(180deg, rgba(255, 83, 83, 0.62) 0%, rgba(248, 217, 54, 0.68) 46.86%, rgba(244, 148, 4, 0.47) 70.02%, rgba(98, 43, 255, 0.17) 94.62%);
			// filter: blur(2.1500000953674316px);
			backdrop-filter: blur(6.050000190734863px);
		}
		.topbox{
			width:198rpx;
			height: 186rpx;
			border-radius: 14rpx;
			opacity: 0.74;
			background: rgba(217, 217, 217, 0.96);
			box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.4);
		}
		.text{
			color: rgba(0, 0, 0, 0.67);
			font-family: "Noto Sans SC";
			font-size: 30rpx;
			font-style: normal;
			font-weight: 400;
			line-height: normal;
		}
		// 发布
		.fabu{
			  position: relative;
			.fabutext{
				padding-top:8rpx;
				color: rgba(0, 0, 0);
				text-align: center;
				font-family: "Noto Sans SC";
				font-size: 30rpx;
				font-style: normal;
				font-weight: 400;
				line-height: normal;
			}
			.fabunumber{
			    position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				// border: 1px solid #000;
				color: rgba(0, 0, 0, 0.68);
				text-align: center;
				font-family: "Noto Sans SC";
				font-size: 30rpx;
				font-style: normal;
				font-weight: 400;
				line-height: normal;
			}
			
		}
	}
	// 图片
	.image{
		width: 628rpx;
		height:700rpx;
		// border:1rpx solid #000;
		margin:22rpx 45rpx;
		.swiper{
			width:100%;
			height:100%;
			border-radius: 50rpx;
			// border: 1px solid #000;
			box-sizing:border-box;
			.swiperitem{
				width:100%;
				height:100%;
				border-radius: 50rpx;
				box-sizing:border-box;
				padding:0rpx 30rpx;
				// box-shadow: -3px 7px 2.7px 0px rgba(0, 0, 0, 0.25);
				.swiperimg{
					// padding:5rpx;
					width:100%;
					height:100%;
					border-radius: 50rpx;
					// box-size:border-box;
				}
			}
		}
		.img{
			width:100%;
			height: 428rpx;
			border-radius: 26rpx;
		}
		.other{
			width: 100%;
			display: grid;
			grid-template-columns: 30% auto;
			gap:95rpx;
			margin-top: 5rpx;
			.img1{
				width: 270rpx;
				height: 260rpx;
				border-radius: 26rpx;
				
			}
			.img2{
				width: 346rpx;
				height: 258rpx;
				border-radius: 26rpx;
			}
		}
	}
	// 描述
	.text{
		
		padding:0rpx 40rpx ;
		.maoshu{
			margin-bottom: 30rpx;
		}
		.contenttext{
			width: 100%;
			// height:700rpx;
			// padding-bottom:100rpx;
			// border-bottom: 1rpx solid  rgba(255, 192, 203, 0.5);
			color: #000;
			font-family: "Noto Sans SC";
			font-size: 30rpx;
			font-style: normal;
			font-weight: 400;
			line-height: normal;
		}
	}
	
	// 评论区域
	.comments{
		// border: 1rpx solid #000;
		margin:40rpx 45rpx;
		.commentsNumber{
			color: rgba(0, 0, 0, 0.47);
			font-family: Inter;
			font-size: 26rpx;
			font-style: normal;
			font-weight: 400;
			line-height: normal;
		}
		// 自己回复样式
		.ownComment{
			display: flex;
			margin-left: 22rpx;
			margin-top:22rpx;
			.ownerimg{
				width: 62rpx;
				height: 62rpx;
				border-radius: 62rpx;
			}
			.commentsInput{
				display: flex;
				width: 472rpx;
				margin-left: 44rpx;
				// padding: 10px 88px;
				justify-content: center;
				align-items: center;
				border-radius: 30rpx;
				background: #D9D9D9;
				color: rgba(0, 0, 0, 0.52);
				text-align: center;
				font-family: "Noto Sans SC";
				font-size: 22rpx;
				font-style: normal;
				font-weight: 400;
				line-height: normal;
			}
		}
		
		// 他人评论样式
		.commentsbox{
			margin-top:30rpx;
			// border: 1rpx solid #000;
			.first{
				
				width: 100%;
				height: 148rpx;
				// border: 1rpx solid #000;
				margin-left: 40rpx;
				margin-top:22rpx;
				// 第一个人
				.user1{
					display: flex;
					.cuserimg{
						width: 62rpx;
						height: 62rpx;
						border-radius: 62rpx;
						
					}
					.cusername{
						margin-left: 20rpx;
						color: #000;
						text-align: center;
						font-family: "Noto Sans SC";
						font-size: 22rpx;
						font-style: normal;
						font-weight: 400;
						line-height: normal;
					}
					
				}
				// 评论
				.comments1{
					display: flex;
					margin-left: 80rpx;
					margin-top: 0rpx;
					width: 70%;
					// border: 1rpx solid pink;
					// border-bottom: 1rpx solid rgba(0, 0, 0, 0.47) ;
					.text1{
						color: #000;
						text-align: center;
						font-family: "Noto Sans SC";
						font-size: 22rpx;
						font-style: normal;
						font-weight: 400;
						line-height: normal;
						margin-right:200rpx;
					}
					.bottle{
						// border: 1rpx solid #000;
						width: 48rpx;
						height: 48rpx;
						
					}
					.textnumber{
						color: #000;
						text-align: center;
						font-family: "Noto Sans SC";
						font-size: 22rpx;
						font-style: normal;
						font-weight: 400;
						line-height: normal;
						margin-top: 10rpx;
						margin-left: 5rpx;
					}
				}
			}
		}
		
		
	}
	
	
}

</style>
